<template>
  <el-container>
    <el-header>
      <h3>属下学员信息</h3>
    </el-header>
    <el-main>
      <el-form :inline="true" ref="form" :model="form">
        <el-form-item prop="query_field">
          <el-input type="text"  v-model="form.query_field" placeholder="输入学员姓名或手机号" @keyup.enter.native="search" suffix-icon="el-icon-search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click.prevent="search">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click.prevent="reset('form')">重置</el-button>
          <el-button type="warning" class="iconfont iconicon_exchange_fill" @click.prevent="show = true">更换教练</el-button>
          <el-button type="success" class="el-icon-download" @click.prevent="exportExcel">导出excel</el-button>
        </el-form-item>
      </el-form>
      <el-table
      border
      :data="tableData"
      v-loading="loading"
      @select="user_select"
      @select-all="select_all"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          label="图像"
        >
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar" :size="50"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="手机号"
          prop="mobile"
        ></el-table-column>
        <el-table-column
          label="进度"
          prop="degree"
        ></el-table-column>
        <el-table-column
          label="教练名称"
          prop="coach_name"
        ></el-table-column>
        <el-table-column
          label="更换教练"
        >
          <template slot-scope="scope">
              <el-select v-model="scope.row.coach_id" @change="((val) => changeCoach(val,scope.row.id))">
                <el-option
                  v-for="item in coachList"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
    </el-footer>
    <el-dialog title="批量更换教练" :visible.sync="show" width="500px">
      <el-form :model="formData" ref="new_form" label-width="130px">
          <el-form-item label="请选择更换的教练:" prop="coach_id">
            <el-select v-model="formData.coach_id">
              <el-option
                v-for="item in coachList"
                :label="item.name"
                :key="item.id"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" @click.prevent="multiChange">更换</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import {studentList, getCoachList} from '@/api/coach'
  import {changeCoach, multiChangeCoach} from '@/api/student'
    export default {
        name: "studentList",
        inject: ['reload'],
        data () {
            return {
                form: {
                  query_field: '',
                },
                coach_id: 0,
                page: 1,
                total:  0,
                pageSize: 10,
                tableData: [
                ],
                loading: true,
                coachList: [],
                show: false,
                changeCoachList: [],
                formData: {
                    coach_id: 0
                },
                allList : [],
            };
        },
        methods: {
            search() {
                var params = {
                    coach_id: this.coach_id,
                };

                if (this.form.query_field.trim().length != 0) {
                    params.query_field = this.form.query_field.trim();
                }
                this.loading = true;
                studentList(params).then(response => {
                    this.tableData = response.data.list;
                    this.page = response.data.paginate.current;
                    this.total = response.data.paginate.total;
                    this.pageSize = response.data.paginate.pageSize;
                    this.loading = false;
                }).catch(err => {

                })

            },
            reset(ref) {
                this.$refs[ref].resetFields();
            },
            changePage(currentPage) {
                var params = {
                    coach_id: this.coach_id,
                    page: currentPage,
                    pageSize: this.pageSize
                };
                if (this.form.query_field.trim().length != 0) {
                    params.query_field = this.form.query_field.trim();
                }
                this.loading = true;
                studentList(params).then(response => {
                    this.tableData = response.data.list;
                    this.page = Number(response.data.paginate.current);
                    this.total = Number(response.data.paginate.total);
                    this.pageSize = Number(response.data.paginate.pageSize);
                    this.loading = false;
                }).catch(err => {

                })
            },
            changeCoach(current_coach_id, student_id) {
                var data = {
                    student_id: student_id,
                    coach_id: current_coach_id,
                };
                changeCoach(data).then(response => {
                    this.$message.success(response.msg);
                    this.reload();
                }).catch(err => {

                })
            },
            user_select(selection, row) {
                //用户点击了 行选按钮  selection包含了已经勾选的项  row则代表勾选或者取消的项
                //第一步 初始化存储批量更换教练的变量
                this.changeCoachList = [];
                selection.forEach(info => {
                    this.changeCoachList.push(info.id);
                })
            },
            select_all(selection) {
                //用户勾选了全选按钮 这需要把当前页面的所有的学员id保存起来
                this.changeCoachList = [];
                selection.forEach(info => {
                    this.changeCoachList.push(info.id);
                })
            },
            multiChange() {
                if (this.changeCoachList.length == 0) {

                    this.$message.warning('请先勾选需要更换教练的学员');
                    this.show = false;
                    return false;
                }
                //获取当前批量修改教练的id
                var student_ids = this.changeCoachList.join(',');
                var coach_id = this.formData.coach_id;
                var data = {
                    student_ids: student_ids,
                    coach_id: coach_id
                };

                multiChangeCoach(data).then(response => {
                    this.$message.success(response.msg);
                    this.show = false;
                    this.reload();
                })
                    .catch(err => {

                    })
            },
            exportExcel() {
                var params = {
                    page_flag: 0,
                    coach_id: this.coach_id
                };
                studentList(params).then(response => {
                    this.allList = response.data.list;

                    import("@/vendor/Export2Excel").then(excel => {
                        const tHeader = ["学员姓名", "学员手机号", "学员进度","教练名称"]; //导出的excel文件头部
                        const filterVal = ["name", "mobile", "degree","coach_name"]; //需要导出的数据key
                        const list = this.allList; //数据源
                        const data = this.formatJson(filterVal, list); //将需要导出的key从数据源中取出
                        excel.export_json_to_excel({
                            header: tHeader, //excel文件头部
                            data, //需要导出的数据
                            filename: '教练属下学员名单', //导出的文件名
                            autoWidth: this.autoWidth, //未知，探索中
                            bookType: this.bookType //导出的文件类型
                        });
                    })
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map( j => v[j]));
            }
        },
        mounted() {
          this.coach_id = this.$route.query.coach_id;
          this.formData.coach_id = Number(this.$route.query.coach_id);
          var params = {
              coach_id: this.coach_id,
          };
          studentList(params).then(response => {
              this.tableData = response.data.list;
              this.page = response.data.paginate.current;
              this.total = response.data.paginate.total;
              this.pageSize = response.data.paginate.pageSize;
              this.loading = false;
              getCoachList().then(response => {
                  this.coachList = response.data;
              })
          }).catch( err => {
          })
        }
    }
</script>

<style scoped>
  .el-container{
    width: 95%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 10px auto;
  }

  .el-container .el-header{
    text-align: center;
  }
  .el-header h3 {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }

  .el-footer {
    text-align: center;
  }
</style>
